<template>
    <view class="content">
    	<view class="bg"></view>
    	<view class="nav">
    	    <view class="nav-i" :class="{active : type == 1}" @click="chooseNav(1)">车辆信息</view>
    	    <view class="nav-i" :class="{active : type == 2}" @click="chooseNav(2)">订单信息</view>
    	    <view class="nav-i" :class="{active : type == 3}" @click="chooseNav(3)">汇总信息</view>
    	</view>
		
        <view class="box" v-if="type == 1">
            <view class="title">车辆信息</view>
            <view class="item">
                <view class="grey">司机</view>
                <view class="item-right">{{detail.name}}</view>
            </view>
            <view class="item">
                <view class="grey">联系方式</view>
                <view class="item-right">{{detail.phone}}</view>
            </view>
            <view class="item">
                <view class="grey">车号</view>
                <view class="item-right">{{detail.number}}</view>
            </view>
            <view class="item">
                <view class="grey">车型</view>
                <view class="item-right">{{detail.vehicle}}</view>
            </view>
            <view class="item">
                <view class="grey">车长</view>
                <view class="item-right">{{detail.length}}</view>
            </view>
            <view class="item">
                <view class="grey">载重</view>
                <view class="item-right">{{detail.load}}</view>
            </view>
        </view>
        
        
        <!-- <view class="title2">订单信息</view> -->
        
		<template v-if="type == 2">
			<view class="search">
				<view class="s-btn" v-if="orderList[0]&&orderList[0].order_type==1&&status||orderList.length==0" @click="tianjia()">添加订单</view>
			    <!-- <input type="text" placeholder="输入收货方姓名或产品名称" class="s-inp">
			    <view class="s-btn">搜索</view> -->
			</view>
			<view class="box" v-for="(item, index) in orderList" :key="index">
			    <view class="title">订单信息</view>
			    <view class="item">
			        <view class="grey">发货方</view>
			        <view class="item-right">{{item.shipper}}</view>
			    </view>
			    <view class="item">
			        <view class="grey">联系人</view>
			        <view class="item-right">{{item.shipper_contact}}</view>
			    </view>
			    <view class="item">
			        <view class="grey">联系方式</view>
			        <view class="item-right">{{item.shipper_phone}}</view>
			    </view>
			    <view class="item">
			        <view class="grey">收货地址</view>
			        <view class="item-right">{{item.address}}</view>
			    </view>
			    <view class="item" v-if="item.position">
			        <view class="grey">经营位置</view>
			        <view class="item-right">{{item.position}}</view>
			    </view>
			    <view class="item">
			        <view class="grey">联系人</view>
			        <view class="item-right">{{item.recipient_contact}}</view>
			    </view>
			    <view class="item">
			        <view class="grey">联系方式</view>
			        <view class="item-right">{{item.recipient_phone}}</view>
			    </view>
			    <view class="item" v-if="item.remark">
			        <view class="grey">备注</view>
			        <view class="item-right">{{item.remark}}</view>
			    </view>
			    
			    <view class="btns2" v-if="item.status<3">
			        <view class="btn1" @click="$gTo(`/pages/loading/ld?id=${item.id}&car_id=${id}`)">装车</view>
			    </view>
                <view class="btns2" v-else>
                    <view class="btn1" style="color: #fff;text-align: center;" @click="sousuoLanya(item)">开始打印</view>
                </view>
			</view>
		</template>
        
		<template v-if="type == 3">
			<view class="box">
                
                
                
			    <view class="item">
			        <view class="grey">总件数</view>
			        <view class="item-right">{{allOrder.all_num}}件</view>
			    </view>
                
			    <view class="item">
			        <view class="grey">总重量</view>
			        <view class="item-right">{{allOrder.all_weight}}斤</view>
			    </view>
                
			    <view class="item">
			        <view class="grey">总体积</view>
			        <view class="item-right">
			            <input type="text" v-model="allOrder.all_volume" placeholder="请输入" class="inp">
			            <text class="u-p-l-15">立方米</text>
			        </view>
			    </view>
                
               
                
				<!-- 时分，整点 -->
			    <view class="item item-center">
			        <view class="grey">装车时间</view>
			        <view class="item-right">
                        
                        <!-- show_3 -->
                        <view @click="show_3=true" v-if="!allOrder.start_time" class="inp time">开始时间</view>
                        <view @click="show_3=true" v-else class="inp time" style="color: #000;">{{allOrder.start_time}}</view>
                        <view @click="show_4=true" v-if="!allOrder.end_time" class="inp time">结束时间</view>
                        <view @click="show_4=true" v-else class="inp time" style="color: #000;">{{allOrder.end_time}}</view>
			        </view>
			    </view>
			    <view class="item">
			        <view class="grey">卸车要求</view>
			        <view class="item-right">
			            <input type="text" v-model="allOrder.ask" placeholder="请输入要求" class="inp">
			        </view>
			    </view>
                
                
                
			    <view class="item">
			        <view class="grey">运输路线</view>
			        <view class="item-right" @click="show_5 = true">
                        <view style="color: gray;font-size: 32rpx;" v-if="allOrder.route&&!allOrder.route.label">请选择</view>
                        <view v-else>{{allOrder.route.label}}</view>
			            <u-icon name="arrow-right" color="#979797" size="28" class="u-m-l-15"></u-icon>
			        </view>
			    </view>
			    <view class="item">
			        <view class="grey">预计到达时间</view>
			        <view class="item-right" @click="show_2 = true">
			            <input type="text" disabled v-model="allOrder.expect_time" placeholder="请选择年月日时分" class="inp">
			            <u-icon name="arrow-right" color="#979797" size="28" class="u-m-l-15"></u-icon>
			        </view>
			    </view>
			    <view class="item">
			        <view class="grey">输入公里数</view>
			        <view class="item-right">
                        
			            <input type="text" v-model="allOrder.kilometer" placeholder="请输入" class="inp">
			            <text class="u-p-l-15">公里</text>
			        </view>
			    </view>
                
			
			    <view class="grey u-p-t-20">上传货物摆放图</view>
                
			    <!-- <image src="../../static/image/up.png" class="up-icon"></image> -->
                
               <!-- <image v-if="!allOrder.kilometer_id.image_id" src="../../static/image/up.png" class="up"></image>
                <image v-else :src="allOrder.kilometer_id.image" class="up" mode="widthFix"></image>
                <view v-if="allOrder.kilometer_id.image_id" @click.stop="previewImage()"
                    style="position: absolute;bottom: 0;width: 180rpx;right: 0;text-align: center;background:rgba(0, 0, 0, 0.4);color: #fff;">
                    查看</view> -->
			    <view class="item-right" v-if="allOrder.kilometer_id" style="position: relative;" @click="chooseImage(1)">
			        <image v-if="!allOrder.kilometer_id.image_id" src="../../static/image/up.png" class="up-icon"></image>
			        <image v-else :src="allOrder.kilometer_id.image" class="up-icon" mode="widthFix"></image>
			        <view v-if="allOrder.kilometer_id.image_id" @click.stop="previewImage(allOrder.kilometer_id)"
			            style="position: absolute;bottom: 0;width: 180rpx;right: 0;text-align: center;background:rgba(0, 0, 0, 0.4);color: #fff;">
			            查看</view>
			    
			    </view>
			    <view class="grey u-p-t-40">发货签封照片</view>
                
                
                <view class="item-right" v-if="allOrder.seal_id" style="position: relative;" @click="chooseImage(2)">
                    <!-- <image v-if="!allOrder.seal_id.image_id" src="../../static/image/up.png" class="up"></image>
                    <image v-else :src="allOrder.seal_id.image" class="up" mode="widthFix"></image> -->
                    
                    <image v-if="!allOrder.seal_id.image_id" src="../../static/image/up.png" class="up-icon"></image>
                    <image v-else :src="allOrder.seal_id.image" class="up-icon" mode="widthFix"></image>
                    <view v-if="allOrder.seal_id.image_id" @click.stop="previewImage(allOrder.seal_id)"
                        style="position: absolute;bottom: 0;width: 180rpx;right: 0;text-align: center;background:rgba(0, 0, 0, 0.4);color: #fff;">
                        查看</view>
                
                </view>
                
			</view>
			
			<view class="btn" @click="start_transport">订单已核对完毕，开始运输</view>
            
		</template>
        
        <template v-if="show_2">
        	<u-picker v-model="show_2" mode="time" @confirm="confirm($event, 2)"  :params="params"></u-picker>
        </template>
        
        <template v-if="show_3">
        	<u-select v-model="show_3" mode="mutil-column-auto" :list="timeList" @confirm="confirm($event, 3)"></u-select>
        </template>
        <template v-if="show_4">
        	<u-select v-model="show_4" mode="mutil-column-auto" :list="timeList" @confirm="confirm($event, 4)"></u-select>
        </template>
        
        <template v-if="show_5">
            
        	<u-select v-model="show_5" mode="single-column" :list="detail.routes" label-name="name" value-name="id" 
        		@confirm="confirm($event, 5)"></u-select>
                
        </template>
        
        
        
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                type: 1,
                id:'',
                detail:'',
                params: {
                    year: true,
                    month: true,
                    day: true,
                    hour: true,
                    minute: true,
                    second: false
                },
                orderList:[],
                show_2:false,
                show_3: false,//预计装货时间-开始
                show_4: false,//预计装货时间-结束
                show_5:false,
                timeList: [],
                allOrder:{
                    all_num:'',//总数量
                    all_weight:'',//总重量
                    all_volume:'',//总体积
                    start_time:'',//开始时间
                    end_time:'',//结束时间
                    ask:'',//卸车要求
                    route:{
                        label:'',
                        value:''
                    },//运输路线id
                    expect_time:'',//预计到达时间
                    kilometer:'',//公里数
                    kilometer_id:{
                        image_id:'',
                        image:''
                    },//公里数图片id 改成货物摆放图
                    seal_id:{
                        image_id:'',
                        image:''
                    },//发货签封图片id
                    
                    
                },
                status:false,//添加地址状态
            };
        },
        onLoad(option) {
            uni.setNavigationBarTitle({
                title:'下单'
            });
            this.id = option.id;
            let _this = this
           uni.$on('orderAddress',function(data){
               
               
               setTimeout(item=>{
                   // if(_this.orderList.length>0){
                   //     // _this.orderList.forEach(item=>{
                   //     //     // console.log(item.id)
                   //     //     if(item.id!=data.id){
                   //     //         _this.orderList.push(data)
                   //     //     }
                   //     // })
                   //     _this.orderList.push(data)
                   // }else{
                   //     _this.orderList.push(data)
                   // }
                   _this.orderList.unshift(data)
                   _this.orderList.forEach(item=>{
                       if(item.status==3){
                           _this.status = true
                       }else{
                           _this.status = false
                       }
                   })
                   
                   if(_this.orderList[0].order_type==1){
                       uni.setNavigationBarTitle({
                           title:'零担下单'
                       });
                   }else{
                       uni.setNavigationBarTitle({
                           title:'包车下单'
                       });
                   }
                   
                   
                   _this.$forceUpdate()
                   
               },1000)
               
               
               
           })
        },
        
        onShow(){
            let _this = this
            if(this.type == 3){
                return;
            }
            this.loading_vehicle()
        },
        methods: {
            
            sousuoLanya(citem){
                
                
                let Arry = [];
                let flg = false
                
                
                console.log(citem)
                citem.goods.forEach(item=>{
                    console.log(item)
                    
                    Arry.push({
                        goods_reason:item.goods_reason,
                        send_num:item.send_num,
                        send_weight:item.send_weight,
                        goods:item.goods,
                    })
                  
                    
                })
                
                if(uni.getStorageSync('bleDevice')){
                    this.$gTo('/pages/escPage?order_id='+citem.out_trade_no+'&data='+JSON.stringify(Arry)+'&out_trade_no='+citem.out_trade_no+'&shipper_contact='+citem.recipient_contact+'&destination='+citem.address+citem.position+'&recipient_phone='+citem.recipient_phone+'&start_date='+citem.start_time+'&pay_status='+citem.pay_status+'&remark='+citem.remark)
                }else{
                    this.$gTo('/pages/search_bluetooth/search_bluetooth')
                }
            },
            
            tianjia(){
                let order_type = 0
                if(this.orderList.length>0&&this.orderList[0].order_type){
                    order_type = this.orderList[0].order_type
                }
                this.$gTo(`/pages/loading/send-add?id=${this.id}&order_type=${order_type}`)
            },
            start_transport(){
                
                if(!this.allOrder.all_num){
                    this.$toast('请先添加车辆信息');
                    return
                }
                if(this.allOrder.kilometer_id&&!this.allOrder.kilometer_id.image_id){
                    this.$toast('请上传货物摆放图');
                    return
                }
                if(this.allOrder.seal_id&&!this.allOrder.seal_id.image_id){
                    this.$toast('请上传发货签封照片');
                    return
                }
                
                
                
                this.$ajax('start_transport', {
                    user_token:this.$getTokens(),
                    car_id:this.id,
                    all_weight:this.allOrder.all_weight,//总重量
                    all_volume:this.allOrder.all_volume,//总体积
                    start_time:this.allOrder.start_time,//开始时间
                    end_time:this.allOrder.end_time,//结束时间
                    ask:this.allOrder.ask,//卸车要求
                    route_id:this.allOrder.route.value,//运输路线id
                    expect_time:this.allOrder.expect_time,//预计到达时间
                    kilometer:this.allOrder.kilometer,//公里数
                    kilometer_id:this.allOrder.kilometer_id.image_id,//公里数图片id 改成货物摆放图
                    seal_id:this.allOrder.seal_id.image_id,//发货签封图片id
                }).then(ret => {
                	if (ret.success == 1000) {
                       this.$alert(ret.msg,()=>{
                           this.$backT();
                           
                       })
                        
                	} else {
                		this.$toast(ret.detail.msg);
                	}
                    
                });
            },
            previewImage(urll) {
                let url = []
            
                url[0] = urll
                uni.previewImage({
                    urls: url,
                    longPressActions: {
                        success: function(data) {},
                        fail: function(err) {
                            console.log(err.errMsg);
                        }
                        
                    }
                });
            },
            chooseImage(index) {
                let _this = this
                uni.chooseImage({
                    count: 1, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album','camera'], //从相册选择
                    success: function(res) {
                        _this.$upLoadPic(res.tempFilePaths[0]).then(data => {
                            if(index==1){
                                
                                _this.allOrder.kilometer_id  = data.detail;
                            }else{
                                _this.allOrder.seal_id = data.detail;
                            }
                        });
            
                    }
                });
                
                
            
            },
            confirm(e, num) {
                console.log(e)
                if(num==2){
                    this.allOrder.expect_time = e.year+'-'+ e.month+'-'+ e.day+' '+ e.hour+':'+e.minute;
                }else if(num == 3) {
            		this.allOrder.start_time = e[0].label+':'+e[1].label;
                    this.allOrder.end_time = ""
            	} else if(num == 4) {
                    this.allOrder.end_time = e[0].label+':'+e[1].label
            	}else if(num==5){
                    this.allOrder.route = e[0];
                }
            },
            
            
            chooseNav(num) {
				this.type = num;
			},
            //获取车辆列表
            loading_vehicle(){
                
                
                this.$ajax('loading_vehicle', {
                    user_token:this.$getTokens(),
                    car_id:this.id,
                    
                }).then(ret => {
                	if (ret.success == 1000) {
                        if(ret.detail){
                            
                            if(ret.detail.order_type==1){
                                uni.setNavigationBarTitle({
                                    title:'零担下单'
                                });
                               
                            }else{
                                uni.setNavigationBarTitle({
                                    title:'包车下单'
                                });
                            }
                            
                            this.detail = ret.detail;
                            
                            this.allOrder = {
                                all_num:ret.detail.all_num,//总数量
                                all_weight:ret.detail.all_weight,//总重量
                                all_volume:ret.detail.all_volume,//总体积
                                start_time:ret.detail.start_date,//开始时间
                                end_time:ret.detail.end_time,//结束时间
                                ask:ret.detail.ask,//卸车要求
                                route:{
                                    label:ret.detail.route,
                                    value:ret.detail.route_id
                                },//运输路线id
                                expect_time:ret.detail.expect_time,//预计到达时间
                                kilometer:ret.detail.kilometer,//公里数
                                kilometer_id:{                                    
                                    image_id:ret.detail.kilometer_id,
                                    image:ret.detail.kilometer_img
                                },//公里数图片id 改成货物摆放图
                                seal_id:{
                                    image_id:ret.detail.seal_img,
                                    image:ret.detail.seal_id
                                },//发货签封图片id
                            }
                            
                            for (let i = 0; i < 24; i++) {
                            	let lab = i < 10 ? '0' + i : i
                                let arry = []
                                for(let t = 0;t<60;t++){
                                    let labt = t < 10 ? '0' + t : t
                                    arry.push({
                                        value: t ,
                                        label: labt,
                                    })
                                }
                            	this.timeList.push({
                            		value: i,
                            		label: lab,
                                    children:arry
                            	})
                            }
                            console.log(this.timeList)
                            if(ret.detail.orders.length>0){
                                let _this = this
                                _this.orderList = ret.detail.orders;
                                
                                
                                
                                // uni.$on('orderAddress',function(data){
                                //     console.log(ret.detail.orders)
                                //     setTimeout(item=>{
                                //         if(_this.orderList.length>0){
                                //             _this.orderList.forEach(item=>{
                                //                 console.log(item.id)
                                //                 console.log(data.id)
                                //                 if(item.id!=data.id){
                                //                     _this.orderList.push(data)
                                //                 }
                                //             })
                                //         }else{
                                //             _this.orderList.push(data)
                                //         }
                                        
                                //         console.log(11111111111)
                                //         console.log(_this.orderList)
                                //         console.log(11111111111)
                                //         _this.$forceUpdate()
                                        
                                //     },1000)
                                    
                                    
                                    
                                // })
                                
                                _this.orderList.forEach(item=>{
                                    if(item.status==3){
                                        _this.status = true
                                    }else{
                                        _this.status = false
                                    }
                                })
                                
                                
                            }
                        }else{
                            this.$toast(ret.detail.msg);
                        }
                        
                	} else {
                		this.$toast(ret.detail.msg);
                	}
                    
                });
            },
        }
    };
</script>

<style lang="scss">
	
	.nav{
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	.nav-i{
	    width: calc(710rpx / 3);
	    padding: 30rpx 0;
	    font-size: 30rpx;
	    font-weight: bold;
	    text-align: center;
	}
	.active{
	    color: #004580;
	    position: relative;
	}
	.active::after{
	    display: block;
	    content: '';
	    width: 32rpx;
	    height: 8rpx;
	    background-color: #004580;
	    position: absolute;
	    bottom: 0;
	    left: 50%;
	    transform: translateX(-50%);
	}
	
    .search{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20rpx;
    }
    .s-inp{
        flex: 1;
        height: 73rpx;
        background-color: #fff;
        border-radius: 15rpx;
        line-height: 73rpx;
        padding-left: 20rpx;
		margin-right: 17rpx;
    }
    .s-btn{
        width: 134rpx;
        height: 73rpx;
        background-color: #0075cf;
        border-radius: 15rpx;
        color: #fff;
        text-align: center;
        line-height: 73rpx;
    }
    
    page{
        background-color: #f2f4fa;
    }
    .content {
    	padding: 30rpx 20rpx;
    }
    .bg {
    	width: 100%;
    	height: 600rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
        background: linear-gradient(to bottom, #cfe4fc,#e1ecfb, #f2f4fa);
    }
    
    .box{
        padding: 20rpx 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 16rpx;
    }
    .title2{
        font-size: 34rpx;
        font-weight: bold;
        color: #00457f;
        padding: 10rpx 0 20rpx;
    }
    .title{
        font-size: 34rpx;
        font-weight: bold;
        padding: 20rpx 0;
    }
    .item{
        padding: 20rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .item-center{
        align-items: center;
    }
    .grey{
        color: #656565;
    }
    .item-right{
        flex: 1;
        text-align: right;
        font-weight: bold;
        word-break: break-all;
        white-space: pre-line;
        padding-left: 30rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 28rpx;
        input{
            font-size: 28rpx;
        }
    }
    .inp{
        flex: 1;
        text-align: right;
    }
    .time{
        background-color: #f5f6fa;
        border-radius: 8rpx;
        width: 230rpx;
        height: 70rpx;
        line-height: 70rpx;
        margin-left: 10rpx;
        text-align: center;
        font-size: 28rpx;
        color: gray;
    }
    .t-inp{
        background-color: #f5f6fa;
        width: 100%;
        min-height: 180rpx;
        height: auto;
        padding: 20rpx;
        border-radius: 10rpx;
    }
    .up-icon{
        width: 187rpx;
        height: 187rpx;
        margin-top: 20rpx;
    }
    .price{
        color: #ff3f00;
        padding-left: 15rpx;
    }
    .price-num{
        font-size: 38rpx;
        font-weight: bold;
    }
    
    .btns{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 30rpx;
        color: #fff;
        font-size: 34rpx;
    }
    .btn-l{
        padding: 25rpx 60rpx;
        background-color: #00457f;
        border-radius: 15rpx;
    }
    .btn-r{
        padding: 25rpx 60rpx;
        background-color: #ff5f2b;
        border-radius: 15rpx;
    }
    
    .btns2{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #fff;
    }
    .btn1{
        padding: 15rpx 50rpx;
        background-color: #004580;
        border-radius: 50rpx;
        margin-left: 20rpx;
    }
    .btn3{
        padding: 15rpx 25rpx;
        background-color: #ff5f2b;
        border-radius: 50rpx;
        margin-left: 20rpx;
    }
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #00457f;
        border-radius: 50rpx;
        margin-top: 50rpx;
    }
    

</style>
